<!--
 * @Author: MuQuanyu(MQy)
 * @Date: 2025-10-10 13:41:47
 * @LastEditTime: 2025-10-10 16:38:15
 * @email: muquanyu@outlook.com
-->
<template>
  <div class="user-manager-box">
    <el-card class="left-card">
      <div class="lc-header">
        <el-input
          v-model="orgSearchKey"
          style="width: 240px"
          placeholder="请输入组织名"
          :suffix-icon="Search"
        />
        <el-button
          ><el-icon><More /></el-icon
        ></el-button>
      </div>
      <div class="left-tree-outer-box">
        <el-tree
          ref="leftDeptRef"
          :data="orgData"
          :props="defaultProps"
          highlight-current
          :current-node-key="currentOrgNodeKey"
          :expand-on-click-node="false"
          node-key="id"
          @node-click="handleOrgTreeClick"
          style="width: 100%"
        />
      </div>
    </el-card>
    <el-card class="right-card"> </el-card>
  </div>
</template>

<script setup lang="ts">
import { Search } from "@element-plus/icons-vue";
import { ref } from "vue";
const orgSearchKey = ref<string>();
const defaultProps = {
  children: "children",
  label: "label",
};
const leftOrgRef = ref();
const currentOrgNodeKey = ref(null);
const orgData = ref<any>([
  {
    id: 1,
    label: "一级菜单",
    children: [
      { id: 2, label: "二级菜单 1" },
      { id: 3, label: "二级菜单 2" },
      { id: 4, label: "二级菜单 3" },
    ],
  },
  {
    id: 5,
    label: "另一个一级菜单",
    children: [
      { id: 6, label: "二级菜单 4" },
      { id: 7, label: "二级菜单 5" },
    ],
  },
]);
const handleOrgTreeClick = (node: any) => {
  if (currentOrgNodeKey.value == node.id) {
    currentOrgNodeKey.value = null;
    leftOrgRef.value.setCurrentKey(null);
  } else {
    currentOrgNodeKey.value = node.id;
    leftOrgRef.value.setCurrentKey(node.id);
  }
  console.log("handleDeptTreeClick", currentOrgNodeKey.value);
};

// const handleCurrentChange = (node: any) => {
//   console.log(node);
// };
</script>

<style lang="scss" scoped>
::v-deep(.el-card) {
  .el-card__body {
    padding: 0 !important;
  }
}
.user-manager-box {
  height: 100%;
  display: flex;
  gap: 5px;
  .left-card {
    flex-grow: 1;
    max-width: 300px;
    .lc-header {
      gap: 5px;
      padding: 20px;
      display: flex;
      align-items: center;
      border-bottom: 1px solid var(--el-card-border-color);
    }
    .left-tree-outer-box {
      padding: 10px;
    }
  }
  .right-card {
    flex-grow: 2;
  }
}
</style>
